<template>
  <div class="productSystem z-h-100">
    <el-card class="z-h-100">
      <listFilter
        ref="listFilter"
        :fields="fields"
        :has-selection="false"
        :search-show="false"
        :left-tool-tool-data="leftToolToolData"
        @getList="load"
      >
        <template slot="action" slot-scope="{ row }">
          <div class="custom-button-group">
            <!-- <span @click.stop="handleButtonClick(row,1)"> <i class="el-icon-edit" /> 修改</span>
            <span @click.stop="handleButtonClick(row,6)"><i class="el-icon-setting" />权限</span>
            <span @click.stop="handleButtonClick(row,3)"><i class="el-icon-map-location" />域名</span>
            <span @click.stop="handleButtonClick(row,2)"><i class="el-icon-delete" /> 删除</span> -->
            <span @click.stop="handleButtonClick(row,1)"> 修改</span>
            <span @click.stop="handleButtonClick(row,6)"> 权限</span>
            <span @click.stop="handleButtonClick(row,3)"> 域名</span>
            <span @click.stop="handleButtonClick(row,2)"> 删除</span>
          </div>
        </template>
      </listFilter>
    </el-card>

    <portalDialog
      v-if="dialogObj.show"
      :dialog-visible.sync="dialogObj.show"
      :title="dialogObj.title || ''"
      :show-tool-bar="false"
      :width="dialogObj.width || '60%'"
      @defineFun="DialogConfrim"
      @comfireFun="dialogObj.show = false"
    >
      <template slot="content">
        <edit v-if="dialogObj.type === 1 || dialogObj.type === 5" :id="dialogObj.id" ref="$edit" :res-obj="sendData" />
        <ip v-if="dialogObj.type === 3" />
        <tree v-if="dialogObj.type === 6" :id="dialogObj.id" ref="$tree" :list="treeList" />
      </template>
    </portalDialog>
  </div>
</template>

<script>
import listFilter from '@/components/listFilter/index.vue'
import portalDialog from '@/components/portalDialog'

import edit from './components/edit/index.vue'
import ip from './components/ip/index.vue'
import tree from './components/tree/index.vue'

import fields from './fields'
import { getList, search, urlList, del, update, menuSave } from '@/api/admin/product'
import { fetchMenuTree } from '@/api/admin/menu'

export default {
  name: 'ProductSystem',

  components: {
    listFilter, portalDialog, edit, ip, tree
  },

  data() {
    return {
      tableData: [],
      fields,
      leftToolToolData: [{ text: '新增', click: this.addClick }],

      dialogObj: {
        show: false
      },
      dialogType: 0,

      sendData: {},

      treeList: []
    }
  },

  created() {
    this.getTree()
  },

  methods: {
    load(index, size, query, callback) {
      getList().then(res => {
        this.tableData = res.data.data

        callback({
          list: res.data.data,
          total: 0
        })
      })
    },

    // 操作栏按钮点击 type   1：编辑  2：删除  3:域名  4：租户  5：新增  6：权限
    handleButtonClick(data, type) {
      this.dialogObj['id'] = type !== 5 ? data.id : ''
      this.dialogObj['type'] = type
      this.dialogObj['title'] = type === 1 ? '修改' : type === 3 ? '域名' : type === 4 ? '租户' : type === 5 ? '新增' : '删除'

      switch (type) {
        case 1:
          this.dialogObj['width'] = '60%'
          search(data.id).then(res => {
            if (res.data.code === 0) {
              this.sendData = res.data
              this.dialogObj['show'] = true
            }
          })
          break
        case 2:
          this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delRow(data.id)
          })
          break
        case 3:
        case 5 :
        case 6 :
          this.sendData = {}
          this.dialogObj['show'] = true
          break
      }
    },

    addClick() {
      this.handleButtonClick({}, 5)
    },

    // 弹窗确认
    async DialogConfrim() {
      switch (this.dialogObj['type']) {
        case 1:
        case 5:
          // eslint-disable-next-line no-case-declarations
          const obj = JSON.parse(JSON.stringify(this.$refs.$edit.inputObj))

          obj.theme = JSON.stringify({
            color: obj.color,
            'background-color': obj.background,
            'border-color': obj.border
          })

          delete obj.color
          delete obj.background
          delete obj.border

          // 先保存租户配置
          await this.$refs.$edit.updateTenant()

          update(obj).then(res => {
            if (res.data.code === 0) {
              this.dialogObj['show'] = false
              this.$refs.listFilter.refreshFun()
            }
          })
          break
        case 3:
          this.dialogObj['show'] = false
          break
        case 6:
          // eslint-disable-next-line no-case-declarations
          const menuIds = this.$refs.$tree.SelectIds.join(',')

          menuSave(this.dialogObj.id, menuIds).then(res => {
            this.dialogObj['show'] = false
          })

          break
      }
    },

    // 删除
    delRow(id) {
      del(id).then(res => {
        if (res.data.code === 0) {
          this.$message({
            type: 'info',
            message: res.data.msg
          })

          this.load()
        }
      })
    },

    // 域名查询
    urlSearch() {
      return new Promise(reslove => {
        urlList().then(res => {
          if (res.data.code === 0) {
            this.sendData = Object.assign({}, res.data)
            reslove(res.data.data)
          }
        })
      })
    },

    getTree() {
      fetchMenuTree().then(res => {
        if (res.data.code === 0) this.treeList = res.data.data
      })
    }
  }

}
</script>

<style lang='less'>
.productSystem{
  .custom-button-group{
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    span{
      color: #409EFF;
    }
  }
  .el-table__body-wrapper{
    height: 100% !important;
  }
}
</style>